<template>
  <div class="carModelDetailSubscriptionWrap">
    <div class="carModelDetailSubscriptionSearch">
      <a-row :gutter="[8,16]">
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="10"
          :xxl="8">
          <a-select
            style="width:100%;"
            allow-clear
            v-model="queryParams.serviceCode"
            :placeholder="$t('pleaseSelect') + $t('vehicleService').toLowerCase()">
            <a-select-option v-for="item in services" :key="item.serviceCode" :value="item.serviceCode" >
              {{ item.serviceName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="8"
          :xxl="10">
          <a-input
            v-model="queryParams.orderNum"
            :placeholder="$t('pleaseInput') + $t('orderNum').toLowerCase()"
            :allow-clear="true"
            style="wdith:100%" />
        </a-col>
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="5"
          :xxl="6"
        >
          <div class="searchBtns">
            <a-button type="info" @click="refreshData(true)">
              {{ $t('inquiry') }}
            </a-button>
            <a-button @click="clearCondition">
              {{ $t('clear') }}
            </a-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="commonTableSty carModelDetailSubscriptionTable">
      <s-table
        ref="table"
        class="h100"
        :columns="columns"
        :data="loadData"
        :pagination="false"
        :scrollX="900"
        rowKey="id"
        size="default">
        <template slot="orderNum" slot-scope="text">
          <table-ellipsis :text="text"></table-ellipsis>
        </template>
        <template #operateType="text">
          <table-ellipsis :text="$t(text === 0 ? 'powerOnSelfTest' : 'userActivation')"></table-ellipsis>
        </template>
        <template #operationResult="text">
          <a-tag :color="text === 3 ? '#FF8762' : '#2bb080'">{{ $t(text === 2 ? 'success' : 'fail') }}</a-tag>
        </template>
        <template slot="serviceExpireDate" slot-scope="text">
          <table-ellipsis :text="$commonFun.getDateStr(text) || '-'"></table-ellipsis>
        </template>
        <template slot="operationTime" slot-scope="text">
          <table-ellipsis :text="$commonFun.getDateTimeStr(text) || '-'"></table-ellipsis>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-spin v-if="record.operateStatus === 3" :spinning="downing">
            <a-icon slot="indicator" type="loading" style="font-size: 16px" spin />
            <a @click="downLoadLog(record)">{{ $t('downLog') }}</a>
          </a-spin>
          <span v-else>-</span>
        </template>
      </s-table>
    </div>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import subscriptionQueryApi from '@/api/modules/system/subscriptionQuery'
import serviceConfigApi from '@/api/modules/software/serviceConfig'
import { STable } from '@/components'
import { mapState } from 'vuex'
import { downloadBlobFile } from '@/utils/functions'
const initQuery = {
  orderNum: '',
  serviceCode: undefined
}
export default {
  components: {
    TableEllipsis,
    STable
  },
  props: {
    time: {
      type: Number,
      default: 3571592
    },
    serviceCode: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      activeVehicleVin: (state) => state.vehicle.vehicleDetail ? state.vehicle.vehicleDetail.vin : '',
      activeVehicleModelId: (state) => state.vehicle.vehicleDetail ? state.vehicle.vehicleDetail.modelId : ''
    })
  },
  data () {
    const columns = [
      {
        title: this.$t('orderNum'),
        dataIndex: 'orderNum',
        scopedSlots: { customRender: 'orderNum' },
        width: 200
      },
      {
        title: this.$t('serviceName'),
        dataIndex: 'serviceName',
        scopedSlots: { customRender: 'serviceName' },
        width: 140
      },
      {
        title: this.$t('serviceExpireDate'),
        dataIndex: 'expiration',
        scopedSlots: { customRender: 'serviceExpireDate' },
        width: 120,
        sorter: true
      },
      {
        title: this.$t('operateType'),
        dataIndex: 'operateType',
        scopedSlots: { customRender: 'operateType' },
        width: 120
      },
      {
        title: this.$t('operationTime'),
        dataIndex: 'operateTime',
        scopedSlots: { customRender: 'operationTime' },
        width: 200,
        sorter: true
      },
      {
        title: this.$t('operationResult'),
        dataIndex: 'operateStatus',
        scopedSlots: { customRender: 'operationResult' },
        width: 120
      },
      {
        title: this.$t('operation'),
        dataIndex: '',
        scopedSlots: { customRender: 'action' },
        width: 120,
        fixed: 'right'
      }
    ]
    return {
      columns,
      tbData: [],
      loadingData: false,
      downing: false,
      queryParams: {
        ...initQuery
      },
      services: []
    }
  },
  created () {
    this.getPageDictData()
    if (this.serviceCode) {
      this.queryParams.serviceCode = this.serviceCode
    } else {
      this.queryParams.serviceCode = undefined
    }
    this.getServicesData()
  },
  methods: {
    getServicesData () {
      const params = {
        modelId: this.activeVehicleModelId,
        // vin: this.activeVehicleVin
      }
      this.services = []
      // subscriptionQueryApi.getServiceVehicleListByVin(params).then(res => {
      //   this.services = res.data
      // })
      serviceConfigApi.getAuditedService(params).then(res => {
        this.services = res.data
      })
    },
    loadData (parameter) {
      if (!this.activeVehicleVin) {
        return new Promise((resolve) => {
          resolve({
            code: 0,
            message: '',
            data: [],
            totalCount: 0,
            totalPage: 0
          })
        })
      }
      return subscriptionQueryApi.getServiceVehicleDetail(
        { vin: this.activeVehicleVin, ...this.queryParams, ...parameter }
      )
    },
    refreshData (isToFirstPage = true) {
      if (!this.$refs.table) {
        return
      }
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.table.loadData(obj)
    },
    clearCondition () {
      this.queryParams = { ...initQuery }
      this.refreshData(true)
    },
    // 下载日志
    downLoadLog (record) {
      this.downing = true
      subscriptionQueryApi.downloadServiceVehicleLog({ id: record.id }).then(res => {
        downloadBlobFile(res, record.orderNum + 'Log.txt')
      }).finally(() => {
        this.downing = false
      })
    },
    getPageDictData () {
      ['getTaskVehicleStatusDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.carModelDetailSubscriptionWrap {
  display: flex;
  flex-direction: column;
  height: 100%;

  .carModelDetailSubscriptionSearch {
    flex: none;
    margin-bottom: 20px;
  }

  .carModelDetailSubscriptionTable {
    flex: 1 0 0;
    min-height: 260px;
  }
}
</style>

<style lang="less">
.carModelDetailSubscriptionSearch {
  .ant-form-item {
    margin-bottom: 0;
  }

  .ant-form-item-control {
    line-height: normal !important;
  }

  @media (max-width: 926px) {
    .searchBtns button {
      margin-top: 16px;
    }
  }

}
</style>
